<template>
  <transition name="notification" appear>
    <div 
      v-if="visible"
      :class="[
        'axiom-notification',
        `axiom-notification--${type}`,
        { 'axiom-notification--with-icon': showIcon }
      ]"
      @click="handleClick"
    >
      <!-- 图标 -->
      <div v-if="showIcon" class="axiom-notification__icon">
        <AxiomIcon :name="iconName" />
      </div>

      <!-- 内容区域 -->
      <div class="axiom-notification__content">
        <div v-if="title" class="axiom-notification__title">{{ title }}</div>
        <div class="axiom-notification__message">
          <slot>{{ message }}</slot>
        </div>
      </div>

      <!-- 关闭按钮 -->
      <button 
        v-if="closable"
        class="axiom-notification__close"
        @click.stop="handleClose"
      >
        <AxiomIcon name="times" />
      </button>
    </div>
  </transition>
</template>

<script>
import { computed, onMounted, onUnmounted } from 'vue'
import AxiomIcon from './AxiomIcon.vue';
// import { GlobalUtilsMixin } from '@/utils/globalUtils';

export default {
  name: 'AxiomNotification',
  // mixins: [GlobalUtilsMixin],
  components: {
    AxiomIcon
  },
  props: {
    title: { type: String, default: '' },
    message: { type: String, default: '' },
    type: {
      type: String,
      default: 'info',
      validator: (value) => ['success', 'warning', 'info', 'error'].includes(value)
    },
    duration: { type: Number, default: 4500 },
    showIcon: { type: Boolean, default: true },
    closable: { type: Boolean, default: true },
    onClick: { type: Function, default: null },
    onClose: { type: Function, default: null }
  },
  emits: ['close'],
  data() {
    return {
      visible: true,
      timer: null
    }
  },
  computed: {
    iconName() {
      const iconMap = {
        success: 'check-circle',
        warning: 'exclamation-triangle',
        info: 'info-circle',
        error: 'times-circle'
      }
      return iconMap[this.type]
    }
  },
  methods: {
    handleClick() {
      // this.$logger.debug('通知被点击', { title: this.title, type: this.type });
      if (this.onClick) {
        this.onClick()
      }
    },
    handleClose() {
      // this.$logger.debug('通知被关闭', { title: this.title, type: this.type });
      this.visible = false
      if (this.onClose) {
        this.onClose()
      }
      this.$emit('close')
    },
    startTimer() {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          this.handleClose()
        }, this.duration)
      }
    },
    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    },
    close() {
      this.handleClose();
    }
  },
  mounted() {
    // this.$logger.debug('AxiomNotification 组件初始化', { title: this.title, type: this.type, duration: this.duration });
    this.startTimer()
  },
  unmounted() {
    this.clearTimer()
  }
}
</script>

<style lang="scss">
@use '../../styles/components/common/_axiom-notification.scss';
</style> 